<template>
  <!-- 添加或修改盘点计划对话框 -->
  <el-dialog :title="title" v-if="open" v-model="open" width="1200px" append-to-body>
    <selectMaterialForm ref="selectMaterialForm" @ok="selectOk"></selectMaterialForm>
    <el-form class="form-demo" ref="form" :model="form" :rules="rules" label-width="90px" :inline="true">
      <el-row :gutter="20">
        <el-col :span="8" :offset="0">
          <el-form-item label="模块名称:" prop="name" style="width: 100%;">
            <el-input placeholder="请输入模块名称" style="width: 100%;" v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="排序:" prop="sort" style="width: 100%;">
            <el-input placeholder="请输入排序" style="width: 100%;" v-model="form.sort"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="启用状态:" prop="status" style="width: 100%;">
            <el-select v-model="form.status" placeholder="请选择启用状态" clearable>
              <el-option label="启用" value="1"></el-option>
              <el-option label="不启用" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="模块描述:" prop="remark" style="width: 100%;">
            <el-input type="textarea" :rows="2" placeholder="请输入模块描述" v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


    </el-form>

    <el-card class="box-card" shadow="always">
      <template #header>
        <div>
          <el-button type="primary" @click="handleAdd">添加</el-button>
          <el-button v-if="multiple" type="danger" @click="handleBatchDelete">删除</el-button>
        </div>
      </template>
      <el-table border ref="add_table" :data="dataSource" @selection-change="handleSelectionChange" v-loading="loading"
        @row-click="rowClick">
        <el-table-column type="selection" width="80" align="center" :selectable="selectHandle" />
        <el-table-column label="#" type="index" width="55" align="center"> </el-table-column>
        <el-table-column label="商品图片" align="center">
          <template #default="scope">
            <el-image style="width: 50px; height: 50px;" :src="scope.row.packImg" lazy>
              <template #error>
                <div class="image-slot">
                  <img style="width: 50px; height: 50px;" src="@/assets/goods/order/img_failure.svg" alt="">
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="left" prop="goodsName" />
      </el-table>
    </el-card>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import selectMaterialForm from "@/views/goods/quote/modules/selectMaterialForm.vue";
import modelMixin from '@/mixins/modelMixin'
import userCardGoods from '@/api/goods/userCardGoods';
import moment from 'moment';
export default {
  name: "addForm",
  components: {
    selectMaterialForm,
  },
  mixins: [modelMixin],
  data() {
    return {
      funcObj: userCardGoods,
      open: false,
      title: "添加产品",
      selectedRows: [],
      multiple: false,
      goods_source: [],
      drop_shipping: [],
      material_audit_status: [],//商品审核状态
      form: {
        status: "1"
      },
      rules: {
        name: [
          { required: true, message: "请输入模块名称", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "请输入排序", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择启用状态", trigger: "blur" },
        ],
      },
      dateRange: [],
      dataSource: [],
      loading: false,
    }
  },
  methods: {
    add() {
      this.open = true;
      this.loading = false;
      this.title = "添加产品";
      this.dataSource = []
      this.form = {
        status: "1"
      }
    },
    /**
     * @编辑
     * @param {*} id 
     */
    edit(row) {
      this.open = true;
      this.title = "编辑产品"
      this.getDetail(row);
    },
    detailAfter() {
      console.log('this.form :>> ', this.form);
      this.dataSource = this.form.jzgGoodsVoList && this.form.jzgGoodsVoList.map(v => (v.goodsId = v.id, v)) || [];
    },
    cancel() {
      this.open = false;
    },
    categoryChange(value) {
      this.form.categoryId = value;
    },
    /**
     * @控制table是否可以选择
     * @param {*} row 
     * @param {*} index 
     * @returns 
     */
    selectHandle(row, index) {
      return true;
    },
    /**
     * 
     */
    handleSelectionChange(val) {
      this.selectedRows = val;
      this.multiple = val.length > 0;
    },
    selectOk(data) {
      this.dataSource = data.map(v => {
        return {
          ...v,
          goodsId: v.id,
          surrogateStatus: v.supplyMode,
          shelfStatus: v.auditStatus,
          costPrice: v.costPrice,
          wholesalePrice: v.wholesalePrice
        }
      });
    },

    rowClick(row, column, event) {
      this.$refs.add_table.toggleRowSelection(row);
    },
    handleAdd() {
      this.$refs.selectMaterialForm.show();
    },

    /**
     * @批量删除
     */
    handleBatchDelete() {
      console.log('this.$modal :>> ', this.$modal);
      if (this.selectedRows.length == 0) {
        this.$modal.msgError('请选择要删除的数据');
        return;
      }
      var ids = this.selectedRows.map(item => item.id).join(',');
      this.$modal.confirm('是否删除选中的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dataSource = this.dataSource.filter(item => !ids.includes(item.id));
      }).catch(() => {
        this.$modal.mesgError({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    classifyForm() {
      console.log('this.dataSource :>> ', this.dataSource);
      if (!this.dataSource.length) {
        this.$modal.msgError('请添加商品');
        throw new Error('请添加商品');
      }
      this.form.goodsIds = this.dataSource.map(v => v.goodsId).join(',');
    },

    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        const keyArr = ['costPrice', 'wholesalePrice']
        if (keyArr.includes(column.property)) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!Number.isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = '-'
        }
        // if (!values.every((value) => Number.isNaN(value))) {
        //   sums[index] = `$ ${values.reduce((prev, curr) => {
        //     const value = Number(curr)
        //     if (!Number.isNaN(value)) {
        //       return prev + curr
        //     } else {
        //       return prev
        //     }
        //   }, 0)}`
        // } else {
        //   sums[index] = 'N/A'
        // }
      })

      return sums
    }
  }
}
</script>

<style type="text/css">
.form-demo .el-form-item .el-form-item__content {
  width: 100% !important;
}
</style>